<template>
	<div>
		<el-container>
			<el-header class="header_style">
				<el-row>
					<el-col :span="11">
						<router-link to="/">
							<img style="margin-top: 15px" src="../assets/img/banner.png" width="30px" />
						</router-link>
					</el-col>

					<el-col :span="9">
						<h3>我的空间</h3>
					</el-col>

					<el-col :span="2" v-if="loginUser != null">
						<el-avatar style="margin-top: 10px; float: right; margin-right: 30px" :size="40"
							:src="loginUser.avatarUrl"></el-avatar>
					</el-col>
					<el-col :span="2" v-if="loginUser != null">
						<el-link href="/self" style="font-size: 20px; margin-top: 15px" :underline="false">我的</el-link>
						<el-link @click="logout()" style="font-size: 20px; margin-top: 15px; margin-left: 30px"
							:underline="false">退出</el-link>
					</el-col>

					<el-col :span="4" v-if="loginUser == null">
						<router-link to="/login">
							<el-button type="primary" plain style="float: right; margin-top: 10px; margin-right: 10px">
								登录</el-button>
						</router-link>
					</el-col>

				</el-row>
			</el-header>

			<el-main style="margin-top: 60px;">

				<el-row>
					<el-col :span="4">&nbsp;</el-col>
					<el-col :span="16">
						<el-image style="width: 100%; height: 300px"
							:src="require('../assets/img/user_page_background.png')"></el-image>

						<el-tabs>
							<el-tab-pane label="我的">
								<el-row>
									<el-col :span="4">
										<el-upload name="avatar" class="avatar-uploader" :action="avatarUploadUrl"
											:show-file-list="false" :on-success="avatarHandleSuccess"
											:before-upload="avatarBeforeUpload">
											<img v-if="user.avatarUrl" :src="user.avatarUrl" class="avatar">
											<i v-else class="el-icon-plus avatar-uploader-icon"></i>
										</el-upload>
									</el-col>

									<el-col style="padding-left: 20px" :span="20">
										<el-form :model="user">
											<el-form-item label="用户名">
												<el-input v-model="user.username" placeholder="请输入用户名"></el-input>
											</el-form-item>
											<el-form-item label="个人简介">
												<el-input v-model="user.description" placeholder="请输入个人简介"></el-input>
											</el-form-item>
											<el-form-item label="密码">
												<el-input v-model="user.password" placeholder="请输入密码" show-password>
												</el-input>
											</el-form-item>
											<el-form-item label="确认密码">
												<el-input v-model="user.passwordCheck" placeholder="请再次输入密码"
													show-password></el-input>
											</el-form-item>

											<el-button @click="updateUser()" type="primary">更新信息</el-button>
											<el-button @click="logoff()" style="float: right" type="danger">注销用户
											</el-button>
										</el-form>
									</el-col>
								</el-row>
							</el-tab-pane>
							<el-tab-pane label="投稿" v-loading="uploading" element-loading-text="视频正在拼命上传"
								element-loading-spinner="el-icon-loading"
								element-loading-background="rgba(0, 0, 0, 0.8)">
								<el-row>
									<el-col :span="8">
										<p>封面</p>
										<el-upload name="cover" class="cover-uploader" :action="coverUploadUrl"
											:show-file-list="false" :on-success="coverHandleSuccess"
											:before-upload="coverBeforeUpload">
											<img v-if="coverUrl" :src="coverUrl" class="cover">
											<i v-else class="el-icon-picture cover-uploader-icon"></i>
										</el-upload>
									</el-col>

									<el-col :span="8">
										<p>视频</p>
										<el-upload name="video" class="video-uploader" :action="videoUploadUrl"
											:show-file-list="false" :on-success="videoHandleSuccess"
											:before-upload="videoBeforeUpload">
											<!-- <img v-if="videoUrl" :src="videoUrl" class="video"> -->
											<i v-if="!videoUrl"
												class="el-icon-video-camera-solid video-uploader-icon"></i>
											<el-result v-if="videoUrl" icon="success" style="width: 400px"
												title="视频上传成功"></el-result>
										</el-upload>
									</el-col>

									<el-col :span="8">
										<p>视频标题</p>
										<el-input v-model="uploadVideoTitle" placeholder="请输入视频标题"></el-input>
										<p>视频类型</p>
										<el-select v-model="uploadVideoType" placeholder="请选择视频类型">
											<el-option v-for="item in videoTypeOptions" :key="item.value"
												:label="item.label" :value="item.value">
											</el-option>
										</el-select>
									</el-col>
								</el-row>

								<el-row>
									<el-col :span="24">
										<p>视频简介</p>
										<el-input :rows="4" type="textarea" v-model="uploadVideoDesc"
											placeholder="请输入视频简介"></el-input>
									</el-col>
								</el-row>

								<el-row>
									<el-col :span="24" style="margin-top: 10px">
										<el-button @click="uploadVideo()" type="primary">投稿</el-button>
									</el-col>
								</el-row>

								<el-empty style="margin-top: 50px" v-if="publishVideos.length == 0"
									description="投稿成为UP主吧">
								</el-empty>

								<el-row style="margin-top: 30px">
									<el-col style="padding: 10px" v-for="video in publishVideos" :key="video.id"
										:span="24">
										<el-row>
											<el-col :span="4">
												<video-list-item-small :coverImageUrl="video.coverImageUrl"
													:duration="video.duration" :title="video.title"
													:videoId="video.videoId">
												</video-list-item-small>
											</el-col>
											<el-col :span="20">
												<p style="margin-left: 20px" v-text="video.description"></p>
												<el-button @click="delVideo(video.id)" style="margin-left: 20px"
													type="danger">删除</el-button>
											</el-col>
										</el-row>
										<el-divider></el-divider>
									</el-col>
								</el-row>

							</el-tab-pane>
							<el-tab-pane label="like">
								<el-empty style="margin-top: 50px" v-if="likeVideos.length == 0"
									description="原来你是个白嫖该怪鸭">
								</el-empty>

								<el-row :gutter="10">
									<el-col :span="4" v-for="video in likeVideos" :key="video.id">
										<video-list-item-small :coverImageUrl="video.coverImageUrl"
											:duration="video.duration" :title="video.title" :videoId="video.videoId">
										</video-list-item-small>
									</el-col>
								</el-row>
							</el-tab-pane>
							<el-tab-pane label="收藏">
								<el-empty style="margin-top: 50px" v-if="collectVideos.length == 0"
									description="你没有收藏视频">
								</el-empty>

								<el-row :gutter="10">
									<el-col :span="4" v-for="video in collectVideos" :key="video.id">
										<video-list-item-small :coverImageUrl="video.coverImageUrl"
											:duration="video.duration" :title="video.title" :videoId="video.videoId">
										</video-list-item-small>
									</el-col>
								</el-row>
							</el-tab-pane>
						</el-tabs>

					</el-col>
					<el-col :span="4">&nbsp;</el-col>
				</el-row>

			</el-main>
		</el-container>
	</div>
</template>

<script>
	import VideoListItemSmall from '../components/VideoListItemSmall.vue'
	export default {
		components: {
			VideoListItemSmall
		},
		name: "Self",
		data() {
			return {
				avatarUploadUrl: "http://127.0.0.1:8080/upload/avatar",
				coverUploadUrl: "http://127.0.0.1:8080/upload/cover",
				videoUploadUrl: "http://127.0.0.1:8080/upload/video",
				loginUser: "",
				user: {
					description: "",
					avatarUrl: "",
					username: "",
					password: "",
					passwordCheck: ""
				},
				likeVideos: [],
				collectVideos: [],
				coverUrl: "",
				videoUrl: "",
				uploadVideoTitle: "",
				uploadVideoDesc: "",
				uploadVideoType: "",
				uploading: false,
				videoTypeOptions: [{
						value: "动画",
						label: "动画"
					},
					{
						value: "音乐",
						label: "音乐"
					},
					{
						value: "游戏",
						label: "游戏"
					},
					{
						value: "科技",
						label: "科技"
					},
					{
						value: "鬼畜",
						label: "鬼畜"
					},
					{
						value: "搞笑",
						label: "搞笑"
					},
					{
						value: "知识",
						label: "知识"
					},
				],
				publishVideos: []
			}
		},
		methods: {
			logout() {
				this.$axios.post('/user/logout', {
					headers: {
						'bingo_cookie': this.loginUser.bingo_cookie
					}
				}).then((result) => {
					localStorage.removeItem('bingo_username')
					localStorage.removeItem('bingo_userId')
					localStorage.removeItem('bingo_avatarUrl')
					localStorage.removeItem('bingo_description')
					localStorage.removeItem('bingo_cookie')
					location.reload()
				}).catch((err) => {
					console.log(err)
				})
			},
			avatarHandleSuccess(res, file) {
				this.user.avatarUrl = res.data
			},
			avatarBeforeUpload(file) {
				var ok = (file.size <= 10 * 1024 * 1024 &&
					(file.type === 'image/jpeg' || file.type === 'image/jpg' || file.type === 'image/png'))

				if (!ok) {
					this.$message({
						showClose: true,
						message: "头像文件不能超过10MB，仅支持jpg、jpeg、png格式",
						type: 'warning'
					})
				}
				return ok
			},
			videoHandleSuccess(res, file) {
				this.uploading = false
				this.videoUrl = res.data
			},
			videoBeforeUpload(file) {
				var ok = (file.size <= 3 * 1024 * 1024 * 1024 &&
					(file.type === 'video/avi' || file.type === 'video/mpeg4' || file.type === 'video/mp4'))

				console.log(file.type)
				if (!ok) {
					this.$message({
						showClose: true,
						message: "视频文件不能超过3GB，仅支持mp4、avi格式",
						type: 'warning'
					})
				}
				if (ok) {
					this.uploading = true
				}
				return ok
			},
			coverHandleSuccess(res, file) {
				this.coverUrl = res.data
			},
			coverBeforeUpload(file) {
				var ok = (file.size <= 50 * 1024 * 1024 &&
					(file.type === 'image/jpeg' || file.type === 'image/jpg' || file.type === 'image/png'))

				if (!ok) {
					this.$message({
						showClose: true,
						message: "封面文件不能超过50MB，仅支持jpg、jpeg、png格式",
						type: 'warning'
					})
				}
				return ok
			},
			updateUser() {
				if (this.user.username == "") {
					this.$message({
						showClose: true,
						message: "用户名不能为空哦",
						type: 'warning'
					})
					return
				}

				if (this.user.password == this.user.passwordCheck) {
					var data = {}
					if (this.user.password != "") {
						data = {
							'username': this.user.username,
							'password': this.user.password,
							'avatarUrl': this.user.avatarUrl,
							'description': this.user.description
						}
					} else {
						data = {
							'username': this.user.username,
							'avatarUrl': this.user.avatarUrl,
							'description': this.user.description
						}
					}

					var self = this
					this.$axios.put('/user/update', data, {
						headers: {
							'bingo_cookie': this.loginUser.bingo_cookie
						}
					}).then((result) => {
						localStorage.setItem('bingo_username', result.data.data.username)
						localStorage.setItem('bingo_description', result.data.data.description)
						localStorage.setItem('bingo_avatarUrl', result.data.data.avatarUrl)
						self.loginUser.username = result.data.data.username
						self.loginUser.description = result.data.data.description
						self.loginUser.avatarUrl = result.data.data.avatarUrl
						this.$message({
							showClose: true,
							message: "已经更新信息",
							type: 'success'
						});
					}).catch((err) => {
						console.log(err)
					})
				} else {
					this.$message({
						showClose: true,
						message: "密码不一致",
						type: 'warning'
					})
					return
				}
			},
			logoff() {
				this.$axios.post('/user/logoff', {}, {
					headers: {
						'bingo_cookie': this.loginUser.bingo_cookie
					}
				}).then((result) => {
					localStorage.removeItem('bingo_username')
					localStorage.removeItem('bingo_userId')
					localStorage.removeItem('bingo_avatarUrl')
					localStorage.removeItem('bingo_description')
					localStorage.removeItem('bingo_cookie')
					this.$router.push('/')
				}).catch((err) => {
					console.log(err)
				})
			},
			delVideo(videoId) {
				var self = this
				this.$axios.delete('/video/del/' + videoId, {
					headers: {
						'bingo_cookie': this.loginUser.bingo_cookie
					}
				}).then((result) => {
					var i = 0
					for (i = 0; i < self.publishVideos.length; i++) {
						if (self.publishVideos[i].id == videoId) {
							break
						}
					}

					self.publishVideos.splice(i, 1)
				}).catch((err) => {
					console.log(err)
				})
			},
			uploadVideo() {
				if (this.videoUrl == "" || this.coverUrl == "" || this.uploadVideoTitle == "" ||
					this.uploadVideoType == "" || this.uploadVideoDesc == "") {
					this.$message({
						showClose: true,
						message: "视频信息不完整哦",
						type: 'warning'
					})
					return
				}

				var self = this
				this.$axios.post('/video/add', {
					'coverImageUrl': this.coverUrl,
					'description': this.uploadVideoDesc,
					'm3u8Url': this.videoUrl,
					'title': this.uploadVideoTitle,
					'type': this.uploadVideoType
				}, {
					headers: {
						'bingo_cookie': this.loginUser.bingo_cookie
					}
				}).then((result) => {
					self.publishVideos.push(result.data.data)
					self.coverUrl = ""
					self.uploadVideoDesc = ""
					self.videoUrl = ""
					self.uploadVideoTitle = ""
					self.uploadVideoType = ""
				}).catch((err) => {
					console.log(err)
				})
			}
		},
		created() {
			if (localStorage.getItem('bingo_cookie') != null) {
				this.loginUser = {
					id: localStorage.getItem('bingo_userId'),
					username: localStorage.getItem('bingo_username'),
					avatarUrl: localStorage.getItem('bingo_avatarUrl'),
					description: localStorage.getItem('bingo_description'),
					bingo_cookie: localStorage.getItem('bingo_cookie')
				}
				this.user.username = this.loginUser.username
				this.user.avatarUrl = this.loginUser.avatarUrl
				this.user.description = this.loginUser.description
			} else {
				this.$router.push('/login')
				return
			}

			var self = this
			this.$axios.get('/user/likedVideos', {
				headers: {
					'bingo_cookie': this.loginUser.bingo_cookie
				}
			}).then((result) => {
				self.likeVideos = result.data.data
			}).catch((err) => {
				console.log(err)
			})
			this.$axios.get('/user/collectedVideos', {
				headers: {
					'bingo_cookie': this.loginUser.bingo_cookie
				}
			}).then((result) => {
				self.collectVideos = result.data.data
			}).catch((err) => {
				console.log(err)
			})
			this.$axios.get('/user/' + this.loginUser.id + "/videos").then((result) => {
				self.publishVideos = result.data.data
			}).catch((err) => {
				console.log(err)
			})
		}
	}
</script>

<style scoped>
	.header_style {
		box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
		border-radius: 30px;
		width: 99%;
		position: fixed;
		background: rgba(255, 255, 255, .5);
		z-index: 10;
		margin-left: auto;
		margin-right: auto;
		backdrop-filter: blur(6px);
	}

	.avatar-uploader {
		border: 1px dashed #d9d9d9;
		border-radius: 6px;
		cursor: pointer;
		position: relative;
		overflow: hidden;
		width: 178px;
		height: 178px;
	}

	.avatar-uploader:hover {
		border-color: #409EFF;
	}

	.avatar-uploader-icon {
		font-size: 28px;
		color: #8c939d;
		width: 178px;
		height: 178px;
		line-height: 178px;
		text-align: center;
	}

	.avatar {
		width: 178px;
		height: 178px;
		display: block;
	}

	.video-uploader {
		border: 1px dashed #d9d9d9;
		border-radius: 6px;
		cursor: pointer;
		position: relative;
		overflow: hidden;
		width: 400px;
		height: 200px;
	}

	.video-uploader:hover {
		border-color: #409EFF;
	}

	.video-uploader-icon {
		font-size: 100px;
		color: #8c939d;
		width: 400px;
		height: 200px;
		line-height: 200px;
		text-align: center;
	}

	.video {
		width: 400px;
		height: 200px;
		display: block;
	}

	.cover-uploader {
		border: 1px dashed #d9d9d9;
		border-radius: 6px;
		cursor: pointer;
		position: relative;
		overflow: hidden;
		width: 400px;
		height: 200px;
	}

	.cover-uploader:hover {
		border-color: #409EFF;
	}

	.cover-uploader-icon {
		font-size: 100px;
		color: #8c939d;
		width: 400px;
		height: 200px;
		line-height: 200px;
		text-align: center;
	}

	.cover {
		width: 400px;
		height: 200px;
		display: block;
	}
</style>